<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<title>个人中心</title>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/one.css" />
<link rel="stylesheet" href="css/km_homepage.css" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery.min.js"></script>
    <script src="js/jquery-3.2.0.min.js"></script>
    <script src="js/distpicker.data.js"></script>
    <script src="js/distpicker.js"></script>
    <script src="js/main.js"></script>
	<%--下面7条是国家下拉列表--%>
	<script src="js/select/jquery-1.11.0.min.js" type="text/javascript" ></script>
	<script src="js/select/bootstrap.min.js"></script>
	<script src="js/select/bootstrap-select.min.js"></script>
	<script src="js/select/countrypicker.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-select.min.css">
    <script type="text/javascript" src="js/select.js"></script>
	<%--添加新曲--%>
	<link href="css/addMusic/css.css" rel="stylesheet">
	<script src="js/addMusic/modernizr.js"></script>
	<script type="text/javascript" src="js/addMusic/jquery.1.11.3.min.js"></script>
	<script type="text/javascript" src="js/addMusic/ajaxfileupload1.1.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		$("#km_m_nav li").click(function() {
			$("#km_m_nav li").removeClass("current");
			$(this).addClass("current");
			$("#km_m_content .km_m_content_con").hide();
			var name = $(this).attr("id");
			$("#" + name + "_con").show();
		})
	})
</script>
<!-- 上传歌曲格式验证 -->
<script type="text/javascript">
$(function(){
	$("#km_btn1").click(function(){
		var str=$("#ipt").val();
		var arr=str.split('\\');
		var my=arr[arr.length-1];
		
		 if((my.indexOf(".mp3"))==-1){
			 alert("上传格式需为mp3格式");
			
		}else{
			$(this).prop("type","submit"); 
			alert("正在上传...");
		} 
	})
});
</script>
</head>
<body>
	<div class="container" style="width: 90%">
		<div class="row clearfix" >
			<div class="col-md-12 column" >
			<!--下面整体  -->
			<div class="km_m_main" style="height: 800px">
				<div class="km_m_box" style="padding-bottom: 20px;">
					<div class="km_m_contents" style="min-height: 750px;margin-top: 20px">
						<div class="km_m_left">
							<%--<div class="head_img" style="background-image:url('${head_img }');background-size: cover;width: 160px;height: 160px;">	</div>--%>
							<div class="head_img" style="width: 160px;height: 160px;border-color:  #337ab7"><img id="img" style="width: 158px;height: 158px;"/></div>
						</div>
						<div class="km_m_right" style="min-height: 700px;">
							<div class="km_m_title">
								<h1 style="color:  #337ab7">歌手信息</h1>
							</div>
							<div id="km_m_nav">
								<ul>
									<!-- <li class="current" id="km_m_portrait">上传头像 -->
									<li class="current" id="km_m_information">编辑资料
									<li id="km_m_password">作品音乐  <%--href="/music?method=checkMusciById&currentPage=1&sid=${singer.id}">--%>
									<li id="km_m_updown">上传歌曲
								</ul>
							</div>
							<div id="km_m_content">
							<div class="km_m_content_con" id="km_m_information_con">
								<form action="${pageContext.request.contextPath}/singer?method=modifySinger&currentPage=1" method="post" >
								<%--<form action="/singer?method=uploadSingerImg&id=${singer.id}&currentPage=1" method="post" enctype="multipart/form-data">--%>
									<div class="form_div">上传头像：
										<input id="km_head" type="file" name="file" style="font-size:10px;display:inline">
									<%--<button id="km_head_submit" style=" width:70px;height:28px;border: none;color: #FFFFFF;background: purple;cursor: pointer;" type="submit"value="">上传</button>--%>
									</div>
								<%--</form>--%>
								<%--<form action="${pageContext.request.contextPath}/singer?method=modifySinger&currentPage=1" method="post" >--%>
									<div class="form_div">用&nbsp;户&nbsp;名：
										<input type="text" name="name" disabled="disabled" id="name" maxlength="30" value="${singer.name}">（不可更改）
									</div>
									<div   class="form_div" style="width: 600px;height: 200px; line-height: 20px;">介&nbsp;&nbsp;&nbsp;&nbsp;绍：<br/>
										<textarea name="introduction" class="t_area" id="signature" value="${singer.introduction}" style="color:black;width: 590px;height: 180px">${singer.introduction}</textarea>
									</div>
									<div class="form_div">
										<span>性&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
										<c:if test="${singer.sexStr=='男'}">
											<input type="radio" name="sex" value="男" checked />男
											<input type="radio" name="sex" value="女"  />女
										</c:if>
										<c:if test="${singer.sexStr=='女'}">
											<input type="radio" name="sex" value="男"  />男
											<input type="radio" name="sex" value="女" checked />女
										</c:if>
									</div>
									
									<div class="form_div"  id="date">
										<span>生&nbsp;&nbsp;&nbsp;&nbsp;日:</span> <br>
										<input type="date" class="form-control" id="birth"  name="birth"  />
									</div>
									<div class="form_div" id="address" style="margin-top:45px;">
										国&nbsp;&nbsp;&nbsp;&nbsp;籍:&nbsp;
									<label>
										<select class="selectpicker countrypicker" name="country" data-live-search="true" data-default="CN" data-flag="true"></select>
									</label>
									</div>
									<div class="form_div" id="sub" style="text-align: center;margin:40px -40px;">
											<input style=" width:100px;height:50px;border: none;color: #FFFFFF;background-color:  #337ab7;cursor: pointer;" type="submit" value="确认保存">
									</div>
								</form>
							</div>
							<div style="display: none;" class="km_m_content_con" id="km_m_password_con">
								<table border="1" class="table table-bordered table-hover">
									<tr class="success">
										<th>编号</th>
										<th>歌名</th>
										<th>专辑</th>
										<th>操作</th>
									</tr>
									<c:forEach items="${Music.list}" var="music" varStatus="s">
										<tr>
											<td>${music.id}</td>
											<td>${music.name}</td>
											<td>${music.introduction}</td>
											<td>
												<a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/singer?method=userById&id=${consumer.id}">播放</a>&nbsp;
												<a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/music?method=userById&id=${consumer.id}">修改</a>&nbsp;
												<a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/singer?method=deleteMusic&currentPage=1&id=${music.id}">删除</a></td>
										</tr>
									</c:forEach>
								</table>
								<div>
									<nav aria-label="Page navigation">
										<ul class="pagination">
											<li>
												<a href="${pageContext.request.contextPath}/singer?method=singerById&currentPage=${Music.currentPage-1}&id=${singer.id}" aria-label="Previous">
													<span aria-hidden="true">&laquo;</span>
												</a>
											</li>
											<c:forEach begin="1" end="${Music.totalPage}" var="i">
												<c:if test="${Music.currentPage==i}">
													<li class="active">
														<a href="${pageContext.request.contextPath}/singer?method=singerById&id=${singer.id}&currentPage=${i}">${i}</a>
													</li>
												</c:if>
												<c:if test="${Music.currentPage!=i}">
													<li>
														<a href="${pageContext.request.contextPath}/singer?method=singerById&id=${singer.id}&currentPage=${i}">${i}</a>
													</li>
												</c:if>
											</c:forEach>
											<li>
												<a href="${pageContext.request.contextPath}/singer?method=singerById&id=${singer.id}&currentPage=${Music.currentPage+1}" aria-label="Next">
													<span aria-hidden="true">&raquo;</span>
												</a>
											</li>
											<span style="font-size: 25px;margin-left: 5px;">共${Music.totalCount}条记录，共${Music.totalPage}页</span>
										</ul>
									</nav>
								</div>
							</div>
							<div style="display: none;" class="km_m_content_con" id="km_m_updown_con">
								<h3 style="text-align: center">添加新曲</h3>
								<div class="container body-content" >
									<br>
									<div class="form-horizontal">
										<div class="form-group">
											<label class="col-sm-2 control-label">歌曲名</label>
											<div class="col-sm-10">
												<input class="form-control" id="muName" name="muName" type="text" style="width: 300px">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">文件</label>
											<input id="FileUpload" name="FileUpload" type="file" style="display:none">
											<input id="FileUpload2" name="FileUpload2" type="file" style="display:none">
											<div class="col-sm-10" >
												<input id="photoCover" class="input-large" type="text" style="height:30px;">
												<div class="btn btn-primary btn-sm" onclick="$('input[id=FileUpload]').click();">选择音乐</div><br/><br/>
												<input id="photoCover2" class="input-large" type="text" style="height:30px;">
												<div class="btn btn-primary btn-sm" onclick="$('input[id=FileUpload2]').click();">选择封面</div>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">歌词</label>
											<input id="muGeci" class="input-large" type="file" style="height:30px;">
											<div class="btn btn-primary btn-sm" onclick="$('input[id=FileUpload2]').click();">选择歌词</div>
										</div>
										<div class="form-group">
											<div class="col-sm-offset-2 col-sm-10">
												<input class="btn btn-default" id="btnSave" type="button" value="上传文件">
											</div>
										</div>
										<div class="form-group"></div>
									</div>
							</div>
						</div>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
		
	</div>	
	<script type="text/javascript">
		$(function() {
			$("#date").selectDate()
			$("#days").focusout(function() {
				var year = $("#year option:selected").html()
				var month = $("#month option:selected").html()
				var day = $("#days option:selected").html()
				console.log(year + month + day)
			})

		})
	</script>
	<script type="text/javascript">
		$(function(){
			$("#km_head_submit").click(function(){
				var str=$("#km_head").val();
				var arr=str.split('\\');
				var my=arr[arr.length-1];
				if((my.indexOf(".jpg")||my.indexOf(".png")||my.indexOf(".jpeg")||my.indexOf(".gif")||my.indexOf(".tif"))==-1){
					 alert("请上传正确图片格式");
				}else{
					$(this).prop("type","submit");  	
				} 
			});
		});
	</script>
	<script type="text/javascript">
		//上传头像不为空
		$(function(){
			//验证密码一致
			$("#km_repass").blur(function(){
				var r=$(this).val();
				var p=$("#km_newpass").val();
				if(p=="" || r==""){
					$("#km_checkpass").html("密码不能为空");
				}else
				if(p==r){
					$("#km_checkpass").html("密码一致");
					$("#km_checkpass").css("color","green");
				}else{
					$("#km_checkpass").html("两次密码不一致");
					$("#km_checkpass").css("color","red");
				}
			});
			$("#km_hp_button").click(function(){
		        var t=$("#km_checkpass").html();
		        if(t!="密码一致"){
		        	alert("两次密码不一致!");
		        } else{
		            $(this).prop("type","submit");
		        }
			 });
			
		});
	</script>
	<script>
        document.querySelector("#km_head").onchange=function(){
            var files=this.files;
            document.querySelector("#img").src=window.URL.createObjectURL(files[0]);
            document.querySelector("#km_head").value=files[0];
            console.log(window.URL.createObjectURL(files[0]));
            files.slice()
        }
	</script>
	<%--<script	type="text/javascript">--%>
	<%--$('#address').distpicker({--%>
		<%--province : '---- 所在省 ----',--%>
		<%--city : '---- 所在市 ----',--%>
		<%--district : '---- 所在区 ----'--%>
	<%--});--%>
 <%--</script>--%>
</body>
</html>